<template>
  <div class="person">
    <span>修改年龄：{{ price }}</span>
    <button @click="showTel">按钮1</button>
    <h2 ref="myTitle">123123</h2>
    {{ cat }}
  </div>
</template>



<script lang="ts" setup name="person">
import { defineExpose, ref, reactive, toRefs, toRef, computed, watch } from "vue";
let name = ref('张三ya')
let cat = reactive({ brand: '本田', price: 100 })
let { price } = toRefs(cat)

let age = toRef(cat, 'price')
//计算属性有缓存，目前的写法是=只可以读
// let fullName = computed(() => name.value + price.value)
let fullName = computed({
  get() {
    return name.value + price.value
  }, set(val) {

  }
})
// function showTel() {
//   price.value += 10
// }
// const stopWatch = watch(fullName, (newVal, oldVal) => {
//   console.log(newVal, oldVal);
//   if (newVal === "张三ya150") {
//     stopWatch()
//   }
// })
// const stopWatch = watch(fullName, (newVal, oldVal) => {
//   console.log(newVal, oldVal);
//   if (newVal === "  张三ya150") {
//     stopWatch()
//   }
// }, { deep: true, immediate: true })
let myTitle = ref()
// reactiv不可整体修改
function showTel() {
  console.log(myTitle.value);
  // console.log('cat', cat);
  // cat = reactive({ brand: '宝马', price: 10000 })
  // console.log('cat', cat);
  Object.assign(cat, { brand: '宝马', price: 10000 })
}
watch(() => cat.price, (newVal, oldVal) => {
  console.log(newVal, oldVal);
})
// reactive定义对象类型，那默认就是深度监听，且关不了
// 创建 title,用于存储dom元素
defineExpose({ age, cat })
</script>

<style scoped>
.person {
  background-color: bisque;
}
</style>
